<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import type {listResponse, optionsType} from "@/api";
import {getOptions, type paramsType} from "@/api";
import {aiRoleCategoryOptions, aiRoleListApi, type aiRoleType} from "@/api/ai_role_api";
import {Message} from "@arco-design/web-vue";
import F_text from "@/components/common/f_text.vue";
import {getSessionIDByRoleID} from "@/service/get_session_id_by_role_id";
const params = reactive<paramsType & { type: number, category: string }>({
  limit: 8,
  type: 1,
  category: "",
})
const categoryOptions = ref<optionsType[]>([])
getOptions(aiRoleCategoryOptions, categoryOptions, () => {
  if (categoryOptions.value.length > 0) {
    params.category = categoryOptions.value[0].value as string
  }
})

const data = reactive<listResponse<aiRoleType>>({
  list: [],
  count: 0
})


const loading = ref(false)

async function getData() {
  loading.value = true
  data.list = []
  data.count = 0
  const res = await aiRoleListApi(params)
  loading.value = false
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Object.assign(data, res.data)
}


watch(()=>params.category, () => {
  getData()
})


</script>

<template>
  <div class="square_view">
    <a-tabs v-model:active-key="params.category">
      <a-tab-pane v-for="item in categoryOptions" :key="item.value" :title="item.label">
        <div class="result">
          <a-spin :loading="loading" style="width: 100%;">
            <div class="list" v-if="data.list.length">
              <div class="item" v-for="item in data.list">
                <div class="top">
                  <div class="left">
                    <a-avatar :image-url="item.avatar"></a-avatar>
                  </div>
                  <div class="right">
                    <f_text class="name">{{ item.title }}</f_text>
                    <f_text>@{{ item.roleUserNickname }}</f_text>
                  </div>
                  <div class="use"><a-button size="mini" @click="getSessionIDByRoleID(item.id)" type="primary">使用</a-button></div>
                </div>
                <div class="bottom">
                  <f_text class="abs" :rows="4">{{ item.abstract }}</f_text>
                  <div class="count">被使用 {{ item.chatCount }} 次</div>
                </div>
              </div>
            </div>
            <div class="no_data" v-else>
              <a-empty></a-empty>
            </div>
          </a-spin>

        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style lang="less">
.square_view {
  .arco-tabs-nav::before{
    height: 0;
  }
  .arco-tabs-tab-title{
    font-size: 16px;
  }
  .arco-tabs-nav-ink{
    display: none;
  }
  .result {
    .list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: 20px;
      grid-column-gap: 20px;
    }

    .item {
      width: 100%;
      padding: 20px;
      border-radius: 5px;
      border: @f_border;
      .top{
        display: flex;
        border-bottom: @f_border;
        padding-bottom: 10px;
        align-items: center;
        position: relative;
        .right{
          margin-left: 10px;
          .name{
            color: var(--color-text-1) !important;
            font-weight: 600;
          }
          .arco-typography{
            color: var(--color-text-2);
          }

        }

        .use{
          position: absolute;
          right: 0;
        }
      }
      .bottom{
        padding-top: 10px;
        .abs{
          height: 4rem;
          .arco-typography{
            color: var(--color-text-2);
          }
        }
        .count{
          font-size: 12px;
          color: var(--color-text-2);
        }
      }
    }
  }
}
</style>